<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:include="include :: header('数据源配置')"/>
	</head>
	<body>
		<div class="layui-container">
			<form id="dataSourceForm" class="layui-form" style="margin-top: 20px;">
				<div class="layui-form-item">
					<label class="layui-form-label">数据源名称</label>
					<div class="layui-input-block">
						<input type="text" name="dbName" class="layui-input" lay-verify="required" autocomplete="off"/>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">数据库名称</label>
						<div class="layui-input-inline">
							<input type="text" name="dbType" class="layui-input" placeholder="mysql" lay-verify="required" autocomplete="off"/>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">数据库URL</label>
					<div class="layui-input-block">
						<input type="text" name="url" class="layui-input" placeholder="url" lay-verify="required" autocomplete="off"/>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">登录名</label>
						<div class="layui-input-inline">
							<input type="text" name="username" class="layui-input" placeholder="username" lay-verify="required" autocomplete="off"/>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">登录密码</label>
						<div class="layui-input-inline">
							<input type="text" name="password" class="layui-input" placeholder="password"/>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">数据库驱动</label>
					<div class="layui-input-block">
						<input type="text" name="driver" class="layui-input" placeholder="driverclassName" lay-verify="required" autocomplete="off"/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">是否默认</label>
					<div class="layui-input-block">
						<input type="radio" name="isUse" value="0" title="当前使用" checked>
						<input type="radio" name="isUse" value="1" title="未使用" >
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block" style="text-align: right;" id="sourceBtn">
						<a class="layui-btn layui-btn-sm" lay-submit="" lay-filter="test"><i class="layui-icon layui-icon-refresh"></i>测试连接</a>
						<a class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="save"><i class="layui-icon layui-icon-ok"></i>确定保存</a>
						<a class="layui-btn layui-btn-sm layui-btn-primary" data-method="close"><i class="layui-icon layui-icon-close"></i>取消关闭</a>
					</div>
				</div>
			</form>
		</div>
		<th:block th:include="include :: footer"/>
		<th:block th:include="include :: testLink"/>
		<script>
			layui.use('form',function(){
				form = layui.form,$ = layui.jquery;

				//表单验证
				form.verify({

				});
				//监听测试按钮
				form.on('submit(test)',function(data){
					var data = data.field;
					testLink($,data);
				});
				//监听保存按钮
				form.on('submit(save)',function(data){
					var data = data.field;
					saveOrUpdate('/dsc/add','dbTable',data,$);
				});
				var active = {
					close:function(othis){
						//先获取当前iframe层的索引
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);//执行关闭
					}
				}

				$('#sourceBtn .layui-btn').on('click',function(){
					var othis = $(this),method = othis.data('method');
					active[method]?active[method].call(this,othis):"";
				});

			});
		</script>
	</body>
</html>
